<template>
  <div class="el-dialog__body">
    <el-card>
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【题型】:{{ format(purple.questionType) }}
            </div></el-col
          >
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【编号】:{{ purple.id }}
            </div></el-col
          >
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【难度】:{{ formatter(purple.difficulty) }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【标签】:{{ purple.tags }}
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【学科】:{{ purple.subjectName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【目录】:{{ purple.directoryName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【方向】:{{ purple.direction }}
            </div></el-col
          >
        </el-row>
      </div>
      <hr />
      <div>
        <p>【题干】：</p>
        <p v-html="purple.question">{{ purple.question }}</p>
        <p>
          {{ format(purple.questionType) }}题 选项：
          （以下选中的选项为正确答案）
        </p>
        <label
          data-v-61b2ab32=""
          role="radio"
          aria-checked="true"
          tabindex="0"
          class="el-radio is-checked"
        >
          <!-- 单选题 -->
          <div>
            <el-radio
              v-for="(item, index) in purple.options"
              v-model="item.isRight"
              is-checked
              :key="index"
              :label="index"
              >{{ item.code }}. {{ item.title }}</el-radio
            >
          </div>
        </label>
        <hr />
        <div>
          <p>
            【参考答案】：<el-button type="danger" @click="aa"
              >视频答案预览</el-button
            >
          </p>
          <video
            width="300px"
            height="200px"
            controls="controls"
            v-if="guanbi"
            :src="purple.videoURL"
            autoplay
          >
            <source />
          </video>
          <hr />
          【答案解析】:
          <p v-html="purple.answer">：{{ purple.answer }}</p>
          <hr />
          <p>【题目备注】：{{ purple.remarks }}</p>
        </div>
      </div>
      <el-button type="primary" size="small" class="closure" @click="del">关闭</el-button>
    </el-card>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'

export default {
  props: {
    link: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      guanbi: false, // 视频显示
      radio: '',
      purple: [],
      videoURL: []
    }
  },
  created () {
    this.detail()
  },
  methods: {
    //   关闭按钮
    del () {
      this.$emit('closure')
    },
    async detail () {
      //   console.log()
      const res = await detail(this.link)
      //   console.log(res)
      this.purple = res.data
      this.videoURL = res.data.videoURL
    },

    formatter (row, column, cellValue, index) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = difficulty.find((item) => item.id === cellValue)
      return obj ? obj.label : ''
    },
    format (row, column, cellValue, index) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = questionType.find((item) => item.id === cellValue)
      return obj ? obj.label : ''
    },
    // 点击按钮隐藏视频
    aa () {
      this.guanbi = true
    }
  }
}
</script>
<style scoped>
.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  height: 100%;
}
.el-col-6 {
  width: 25%;
  padding: 10px 0;
}
.closure{
float: right;
margin-bottom: 10px;
}
</style>
